<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="__Admin__/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="__Admin__/js/jquery.js"></script>
    <link href="__Admin__/lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />

    <style>
        .forminfo .add,
        .forminfo .div{
            font-size: 16px;
            margin-right: 10px;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li><a href="#">商品列表</a></li>
            <li><a href="#">商品相册</a></li>
        </ul>
    </div>
    <div class="formbody">
        <div class="formtitle"><span>商品相册</span></div>
        <style>
            .photos_list li{
                float: left;
                border: 1px solid #ccc;
                padding: 4px;
                text-align: center;
                margin: 2px;
            }
            .photos_list li img {
                width: 100px;
            }
            .photos_list li span {
                font-size: 16px;
                margin-right: 10px;
                cursor: pointer;
            }
        </style>
        <ul class="photos_list">
            <volist name="list" id="vo">
                <li>
                    <span class="del_photo" data_id="{$vo.photo_id}">[ - ]</span><br>
                    <a href="__UPLOADS__/{$vo.src}" data-lightbox="描述图片" data-title="原图片">
                        <img src="__UPLOADS__/{$vo.thumb}" />
                    </a>
                </li>
            </volist>
        </ul>
        <form action="" method="post" enctype="multipart/form-data">
            <ul class="forminfo goods_photos">
                <li>
                    <span class="add">[ + ]</span><input name="goods_photos[]" type="file"/>
                </li>
            </ul>
            <ul>
                <li>
                    <label>&nbsp;</label>
                    <input name="" id="btnSubmit" type="submit" class="btn" value="确认保存" />
                </li>
            </ul>
        </form>
    </div>
</body>
<script type="text/javascript">

    /* // 使用jQ动态增加相册的文件上传框
     $('.forminfo').on('click','.add',function(e){
     // 使用 e.target 获取到最初被点击的那个DOM元素
     $(e.target).parent()  // 找到 当前被点击的.add的父级元素li
     .clone()   // 把父级元素li复制出来
     // 把复制出来的li里面的span中的 加号 改成 - 号,并修改样式成 .div
     .find('span').removeClass('add').addClass('div').html('[ - ]')
     // 接下来还要把 span的父级元素找到，并追加到 相册中
     .parent().appendTo('.goods_photos');
     // $(e.target).parent().clone().appendTo('.goods_photos');
     });*/

    // 使用jQ动态增加相册的文件上传框
    $('.forminfo').on('click', '.add', function (e) {
        $(e.target).parent().clone().find('span').removeClass('add')
            .addClass('div').html('[ - ]').parent().appendTo('.goods_photos');
    });
    // 使用jQ动态删除相册的文件上传框
    $('.forminfo').on('click', '.div', function (e) {
        //console.log();
        $(e.target).parent().remove();
    });
    // 删除商品图片
    $('.del_photo').click(function () {
        // 获取当前商品被点击的id
        var id = $(this).attr('data_id');
        // 创建当前对象给ajax使用
        var _this = $(this);
        $.get('{:U("Goods/delPhoto")}', {'photo_id':id}, function (res) {
            // 根据ajax反回的结果，同步移除图片所属的li标签
            if (res) {
                _this.parent().remove();
            }else {
                alert('移除失败！');
            }
        });
    });
</script>
</html>
<script type="text/javascript" src="__Admin__/lightbox/js/lightbox-plus-jquery.js"></script>